<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('服务器列表')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            服务器Ip：<input type="text" name="serverIp"/>
                        </li>
                        <li>
                            状态：
                            <select id="statusList" class="form-control select2-multiple" name="statusList" multiple>
                            </select>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="restSearch()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <!-- 新增按钮 -->
            <a class="btn btn-success" onclick="$.operate.add()">
                <i class="fa fa-plus"></i> 新增
            </a>
            <!-- 删除按钮，初始为禁用状态 -->
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
            <!-- 刷新按钮，位置靠最右边 -->

        </div>

        <div class="col-sm-12   table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />

<script th:inline="javascript">

    var taskInterval;

    $(function() {


        initSelect();
        setTimeout(function() {
            initTable()// 延时执行
        }, 500);
    });



    function openServerFile(id) {
        // window.location.replace(ctx+"page/server/serverFile?serverId="+id);
        $.modal.openWithClose("文件列表",ctx+"page/server/serverFile?id="+id)
    }


    //初始化下拉框
    function  initSelect() {
        $.operate.get(ctx+"server/findServerStatus",function (res) {
            $.each(res.data, function(index, item) {
                $('#statusList').append('<option value="' + item.status + '">' + item.name+'</option>');
            });
            $('#statusList').select2({
                placeholder: "请选择状态",
                allowClear: true
            });
        })
    }

    function initRefensh() {
        $.operate.ajaxGet(ctx+"conf/getServerCheckTime",function (data) {
            if(data == -1){
                $('#optTimes').text("停止刷新");
            }else {
                $('#optTimes').text(data+"秒刷新");
                taskInterval = setInterval(function() {
                    // 这里是你要定时执行的任务
                    $.operate.ajaxJustGet(ctx+"server/checkAndUpdStatus",function (res) {
                        $.table.search();
                    })
                }, 1000*data);
            }
        })
    }

    //开始定时刷新状态
    function  openServerRrefensh(time){
        $.operate.ajaxGet(ctx+"conf/addServerCheckConf?times="+time);

        if(time == -1){
            $('#optTimes').text("停止刷新");
            clearInterval(taskInterval);
            return;
        }
        $('#optTimes').text(time+"秒刷新");
        taskInterval = setInterval(function() {
            // 这里是你要定时执行的任务
            $.operate.ajaxJustGet(ctx+"server/checkAndUpdStatus",function (res) {
                //刷新表格
                $.table.search();
                //添加配置

            })
        }, 1000*time);
    }

    /**
     * 重置
     */
    function restSearch() {
        $.form.reset();
        $("#statusList").val([]).trigger('change');
    }

    //变更状态
    function changeTo(id,state) {

        var JsonData = { "id": id, "status": state };
        debugger;
       //state ->2 ：  停用
       //state -> 1 : 启用
        var msg = "停用";
        if(state == 1){
            msg = "启用"
            checkAndChange(id,msg,JsonData)
        }else {
            changeStatus(JsonData,msg);
        }
    }

    function checkAndChange(id,msg,jsonData) {
        $.modal.msg("正在进行服务器连接测试，请耐心等候10秒左右！")
        $.operate.ajaxGet(ctx+"/server/getById?id="+id,function (data) {
            $.operate.postJSON(ctx+"/server/checkConnect",JSON.stringify(data),function (r2) {
                if(r2.data.code != '200'){
                    $.modal.alertError("该服务器："+r2.data.msg+" 无法变更状态!");
                    return;
                }else {
                    changeStatus(jsonData,msg);
                }
            })
        })
    }
    
    function changeStatus(JsonData,msg) {
        $.modal.confirm("确认要"+msg+"吗？", function() {
            $.operate.postJSON(ctx + "/server/changeStatus", JSON.stringify(JsonData),function (res) {
                $.modal.alertSuccess("状态变更成功！");
                $.table.search();
            });
        })
    }
    
    function openApps(id) {
        window.location.replace(ctx+"page/app/appList?serverId="+id);

    }

    /**
     * 初始化表格
     */
    function initTable() {
        var options = {
            height:750,
            url: ctx + "/server/pageList",
            createUrl: ctx+ "/page/server/serverAdd",
            updateUrl:  ctx+"/page/server/serverEdit",
            removeUrl:   ctx+"/server/remove",
            modalName: "服务器列表",
            columns: [{
                checkbox: true

            },
                {
                    field: 'id',
                    visible: false
                },
                {
                    field: 'serverName',
                    title: '服务器名称'
                },
                {
                    field: 'serverIp',
                    title: '服务器Ip'
                },
                {
                    field: 'appServerCounts',
                    title: '应用个数'
                },
                {

                    title: '状态',
                    formatter:function (value, row, index) {
                       var json = JSON.stringify(row);
                        if(row.serverStatus == 2){
                            //运行中
                            return '<i class="fa fa-toggle-off text-info fa-2x" onclick="changeTo(' + row.id +  '\,1\)"  data-toggle="tooltip" data-placement="right" title="" data-original-title="'+row.statusName+'"></i> ';
                        }else if(row.serverStatus == 1){
                            //停用中
                            return '<i class="fa fa-toggle-on text-info fa-2x" onclick="changeTo(' + row.id +  '\,2\)" data-toggle="tooltip" data-placement="right" title="" data-original-title="'+row.statusName+'"></i> ';
                        }else {
                            return '<i class="fa fa-remove text-info fa-2x" data-toggle="tooltip" data-placement="right" title="" data-original-title="'+row.statusName+'"></i> ';
                        }
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');


                        actions.push('<span class="dropdown">');
                        actions.push(' <a class="btn btn-success btn-xs dropdown-toggle" href="javascript:void(0)"id="dropdownMenu3" data-toggle="dropdown"><i class="fa fa-chevron-circle-right"></i>更多</a>  ');
                        actions.push('<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">');
                        actions.push( '<li class="mt5">');
                        actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openApps(" + row.id + ", 0)'><i class='fa-space-shuttle'></i>应用详情</a> ");
                        actions.push( '</li>');
                        // actions.push( '<li class="mt5">');
                        // actions.push("<a class='btn  btn-xs' href='javascript:void(0)' onclick='openServerFile(" + row.id + ", 0)'><i class='fa-space-shuttle'></i>系统文件</a> ");
                        // actions.push( '</li>');
                        actions.push('</ul>');
                        actions.push( ' </span>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }



</script>
</body>
</html>